<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>026-css自定义属性</title>
    <style>
      /* 
            定义自定义属性
            在:root代码块里面声明的变量就是全局变量，并且局部变量会覆盖全局变量
         */
      :root {
        --color1: blue;
        --color2: red;
        --base-size: 4px;
        --base-width: 10px;
        /* 可以嵌套使用 */
        --bgc-red: var(--color2);
      }

      /* 局部变量 */
      .theme-max {
        --color1: green;
      }

      /* 使用变量 */
      .box1 {
        color: var(--color1);
      }

      .box2 {
        color: var(--color2);
      }

      .font_20 {
        font-size: calc(5 * var(--base-size));
      }

      .theme-max p {
        color: var(--color1);
      }

      .box-active {
        background-color: var(--bgc-red);
        width: calc(10 * var(--base-width));
        font-size: calc(3 * var(--base-size));
      }
    </style>
  </head>

  <body>
    <button onclick="setCssVar()">通过js动态修改css变量</button>
    <button onclick="initCssVar()">恢复</button>
    <div class="box1">使用自定义变量--color1</div>
    <div class="box2">使用自定义变量--color2</div>
    <p class="font_20">通过calc计算使字体变为20px</p>
    <div class="theme-max">
      <p>局部变量</p>
    </div>
    <div class="box-active">动态样式</div>
    <script>
      // 设置css变量
      function setCssVar() {
        document.documentElement.style.setProperty('--base-size', '10px')
      }
      function initCssVar() {
        document.documentElement.style.setProperty('--base-size', '4px')
      }
    </script>
  </body>
</html>
